<template>
  <div>
    <!-- 头部 -->
    <home-head />
    <!-- /头部 -->
    <!-- 轮播 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid clickable column-num="3">
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :to="{
            path: '/itemLists',
            query: {
              cateId: cate.id
            }
          }"
          :text="cate.name" />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <recommend
        :items="items"
        @clickAdd="addCart"
        @clickItem="clickItem"/>
      <!-- /推荐商品 -->
    </div>
    </van-pull-refresh>
    <!-- 底部tabbar -->
    <my-tabbar />
    <!-- /底部tabbar -->
  </div>
</template>

<script>
import MyTabbar from '@/components/MyTabbar'
import HomeHead from './components/HomeHead.vue'
import { fetchBanner, fetchCates, fetchItems } from 'api'
import Recommend from './components/Recommend.vue'
// import { mapMutations, mapState } from 'vuex'
// import { Toast } from 'vant'
import cartMixin from 'mixins/addCartMixin'
export default {
  name: 'home',
  data () {
    return {
      banners: [],
      cates: [],
      recommendId: 72399,
      items: [], // 推荐商品
      isLoading: false // 下拉刷新初始状态
    }
  },
  created () {
    this.fetchBanners()
    this.fetchCates()
    this.fetchItems()
  },
  mixins: [cartMixin],
  methods: {
    addCart (item) {
      // 点击加入购物车
      // 购买数量 默认选中
      item = {
        ...item,
        num: 1,
        checked: true
      }
      this._add_cart(item)
      // 添加购物车之前 判断购物车中是否有该商品 有的 禁止添加
      // _items
      /* const hasItem = this._items.find(el => el.id === item.id)
      if (hasItem) {
        // 购物车中已经有了该商品
        Toast('购物车中已经有该商品，请勿重复添加')
        return
      }
      this.add_cart(item)
      Toast('添加成功，快去付钱吧')
      console.log(item) */
    },
    clickItem ({ itemId }) {
      // 点击商品 进入详情页
      this.$router.push(`/detail/${itemId}`)
    },
    onRefresh () {
      // 调用 需要 更新数据的请求函数
      this.fetchItems()
    },
    fetchBanners () {
      fetchBanner().then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
      // 请求banner
      /* axios.get('https://api.it120.cc/conner/banner/list').then(res => {
        console.log(res)
      }) */
      /* this.$http.get('https://api.it120.cc/conner/banner/list').then(res => {
        console.log(res)
      }) */
    },
    fetchCates () {
      // 请求分类
      fetchCates().then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchItems () {
      // 请求 推荐商品
      fetchItems({
        categoryId: this.recommendId
      }).then(res => {
        console.log(res)
        this.isLoading = false
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    // ...mapMutations('cart', ['add_cart'])
  },
  components: {
    MyTabbar,
    HomeHead,
    Recommend
  }
  /* computed: {
    ...mapState({
      _items: state => state.cart.cart.items
    })
  } */
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 50px;
  margin-bottom: 50px;
  .van-grid {
    /deep/ .van-icon__image {
      width: 2em;
      height: 2em;
    }
  }
}
.my-swipe {
  img {
    width: 100%;
  }
  /deep/ .van-swipe__indicator {
    width: 6px;
  }
}
</style>
